<template>
  <div>
    <!-- 数据柱状图 -->
    <div class="echart" id="mychart" :style="myChartStyle"></div>
  </div>
</template>

<script>
import countListApi from "@/api/boothManage";
import * as echarts from "echarts";
export default {
  data() {
    return {
      xData: [], //横坐标
      yData: [], //数据
      myChartStyle: { float: "left", width: "100%", height: "400px" ,marginTop: "50px"}, //图表样式
      countList: [],
    };
  },
  methods: {
    getCountList() {
      let that = this
      countListApi.getCountList().then((response) => {
        this.countList = response.data;
        console.log("数据:", this.countList);
        this.countList.forEach((c) => {
          this.xData.push(c.stateName);
          this.yData.push(c.count);
        });
      });

      setTimeout(function () {
        that.initEcharts();
      }, 1000);
    },

    initEcharts() {
      // 基本柱状图
      const option = {
        title: {
          text: "摊位状况统计",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}",
        },
        legend: {
          orient: "vertical",
          x: "right",
          y: "top",
          data: ["数量"],
        },
        xAxis: {
          data: this.xData,
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar", //形状为柱状图
            data: this.yData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },

  created() {
    this.getCountList();
  },
};
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}
.el-dialog .el-input {
  width: 50%;
}
.el-col {
  border-radius: 4px;
}
</style>
